<script setup lang="ts">
import * as echarts from 'echarts'
import {onMounted, watch} from 'vue'

const props = defineProps<{
  title: string  // 图表标题
}>()

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('chart'), 'dark')

  const option = {
    aria: {
      enabled: true,
      decal: {show: true}
    },
    title: {
      text: props.title
    },
    tooltip: {},
    legend: {},
    xAxis: {
      data: ['单位001', '单位002', '单位003', '单位004', '单位005', '单位006', '单位007', '单位008', '单位009', '单位010']
    },
    yAxis: {},
    series: [
      {
        name: '问题数量',
        type: 'bar',
        data: [35, 20, 16, 10, 10, 10, 7, 6, 5, 4],
        label: {
          show: true,
          position: 'top'
        },
      }
    ],
    backgroundColor: 'rgba(4,8,16,0)',  // dark 模式下，设置背景透明
  }

  // 绘制图表
  option && myChart.setOption(option)


  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener('resize', function () {
    myChart?.resize()
  })

  // 监听 title 变化，更新图表标题
  watch(() => props.title, () => {
    myChart?.setOption({
      title: {
        text: props.title
      }
    })
  })
})
</script>

<template>
  <div id="chart" style="width: 100%; height: 100%;"></div>
</template>
